    <!doctype html>
<html lang="en">
<head>
    @include('wap.layout.head')
    <link rel="stylesheet" href="{{asset('/css/wap/wantbuy.css')}}">
    <!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
    <link rel="stylesheet" href="{{asset('/js/wap/dist/dropload.css')}}">
    <script src="{{asset('/js/wap/dist/dropload.min.js')}}"></script>
    <script src="{{asset('/frame/city.data.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('/frame/city.data-3.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('/frame/mui.picker.js')}}"></script>
    <script src="{{asset('/frame/mui.poppicker.js')}}"></script>
    <link href="{{asset('/frame/mui.picker.css')}}" rel="stylesheet" />
    <link href="{{asset('/frame/mui.poppicker.css')}}" rel="stylesheet" />
    <link href="{{asset('/frame/animate.css')}}" rel="stylesheet" />
</head>
<body>
<div class="header_box">
    <form>
        <input type="search" autocomplete="off" name="baike-search" placeholder="请输入您想要查询的商品" class="input-kw">
    </form>
</div>
<div class="nav_box">
    <a data-id="1" data-type="1">最新发布</a>
    <a data-id="2" data-type="1">即将截止</a>
    <a data-id="3" data-type="1">浏览热度</a>
    <a data-id="4" data-type="2">筛选<img class="screen_img" src="{{asset('/img/wap/screen_img.png')}}"><img class="screen_img02" src="{{asset('/img/wap/screen_img02.png')}}"></a>
</div>
<div class="content">
    <div class="stockinfo fl">

    </div>
</div>
<div class="bg_h"></div>
<div class="screen_main">
    <div class="screen_main_overflow">
        <div class="screen_box fl"  id="showCityPicker3">
            <h2>交货地区</h2>
            <font>〉</font>
            <span id='cityResult3'>请选择</span>
        </div>
        <div class="screen_box fl">
            <h2>品牌</h2>
        </div>
        <div class="brand_list fl">
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
        </div>
        <div class="screen_box fl">
            <h2>分类</h2>
        </div>
        <div class="classify_list fl">
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
            <a data-id="1">海康威视</a>
        </div>
        <div class="btn_box">
            <div class="btn_resetting fl btn_sx" data-type = "1">重置</div>
            <div class="btn_confirm fl btn_sx" data-type = "2">确定</div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('.screen_main_overflow').height($(window).height() - 95);
        imgHeight();
        var page = 0;// 页数
        var size = 5;// 每页展示5个
        var status = '';//最新发布 即将截止 浏览热度
        var address = '';//交货地址
        var brand = '';//品牌
        var classify = '';//分类

        var nav_box_a = $(".nav_box a");
        nav_box_a.click(function(){
            if($(this).attr('data-type') == 1){
                nav_box_a.removeClass("dq");
                $(this).addClass("dq");
                status = $(this).attr('data-id');
                getlist();
            }else{
                //$(this).addClass("dq");
                $('.bg_h').show();
                $('.screen_main').show();
                $('.screen_main').removeClass('animated bounceOutUp');
                $('.screen_main').addClass('animated bounceInDown');
            }
         });

        //收货地址选择
        var doc = document;
        var cityPicker3 = new mui.PopPicker({
            layer: 2,
            titles: ["省", "市"]
        });
        cityPicker3.setData(cityData3);
        var showCityPickerButton = doc.getElementById('showCityPicker3');
        var cityResult3 = doc.getElementById('cityResult3');
        showCityPickerButton.addEventListener('tap', function (event) {
            cityPicker3.show(function (items) {
                cityResult3.innerText = (items[1] || {}).text;
                address = (items[1] || {}).text;
            });
        }, false);
        //选择品牌
        var brand_a = $(".brand_list a");
        brand_a.click(function(){
            if($(this).hasClass('dq')){
                $(this).removeClass("dq");
                brand = '';
            }else{
                brand_a.removeClass("dq");
                $(this).addClass("dq");
                brand = $(this).attr('data-id');
            }
        });
        //选择分类
        var classify_a = $(".classify_list a");
        classify_a.click(function(){
            if($(this).hasClass('dq')){
                $(this).removeClass("dq");
                classify = '';
            }else{
                classify_a.removeClass("dq");
                $(this).addClass("dq");
                classify = $(this).attr('data-id');
            }
        });

        //重置，确定
        $('.btn_sx').click(function(){
            var type = $(this).attr('data-type');
            if(type == 1){//重置
                address = '';
                cityResult3.innerText = '请选择'
                brand = '';
                brand_a.removeClass("dq");
                classify = '';
                classify_a.removeClass("dq");
            }else{
                $('.bg_h').hide();
                $('.screen_main').removeClass('animated bounceInDown');
                $('.screen_main').addClass('animated bounceOutUp');
                getlist();
            }

        });

        // dropload
        var  drop_load = $('.content').dropload({
            scrollArea : window,
            loadDownFn : function(me){
                page++;
                // 拼接HTML
                var result = '';
                $.ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size+'&status='+status+'&address='+address+'&brand='+brand+'&classify='+classify,
                    dataType: 'json',
                    success: function(data){
                        var arrLen = data.length;
                        if(arrLen > 0){
                            for(var i=0; i<arrLen; i++){
                                result +=   '<div class="box_center">'+
                                                '<div class="imglist">'+
                                                    '<div class="img ui-flex justify-center center"><img src="/img/wap/cp_01.png"></div>'+
                                                    '<div class="img"><img src="http://www.ejing365.com/img/inc/header/ejinglogo.png"></div>'+
                                                    '<div class="img"><img src="http://ejing-files-uploads.oss-cn-hangzhou.aliyuncs.com/upload/image/da48eb63d6edd2814b2aef56db81c481.jpeg"></div>'+
                                                '</div>'+
                                                '<div class="name">15年的DS-7808N-E2 200卖 包邮 白菜价甩卖15年的DS-7808N-E2 200卖 包邮 白菜价甩卖</div>'+
                                                '<div class="fl price">¥298.00</div>'+
                                                '<div class="fl originalprice">¥298.00</div>'+
                                                '<div class="fr btn_contact">立即联系</div>'+
                                            '</div>';
                            }
                        // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            // 插入数据到页面，放到最后面
                            $('.stockinfo').append(result);
                            imgHeight();
                            // 每次数据插入，必须重置
                            me.resetload();
                        },1000);
                    },
                    error: function(xhr, type){
                        //alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });

        function getlist(){
            page = 0;
            $(".stockinfo").html('');
            drop_load.resetload();
        }

    });
    $(window).resize(function () {
        imgHeight();
        $('.screen_main_overflow').height($(window).height() - 95);
    })
    function imgHeight(){
        $('.imglist .img').height($('body').width()*0.98*0.32);
        $('.imglist .img').css({'line-height':$('body').width()*0.98*0.32+'px'});

    }
</script>
</body>
</html>
